<template>
  <view style="background-color: #fff;height: 100vh;width: 100%;">
    <view style="padding: 20rpx;height: 100vh; padding-top: 190rpx;box-sizing: border-box; background-color: #fff;">
      <view style="width: 95%;z-index: 999; position: fixed;padding-top: 10rpx; top: 0; background-color: #fff;">
        <view class="top">
          <view class="left"><image style="width: 226rpx;height: 48rpx;" src="/static/lzl/side_title@2x.png" mode="widthFix"></image></view>
          <view class="right" @click="gouShopping">
            <image style="width: 45rpx;vertical-align: middle; height: 45rpx;" src="/static/lzl/shopp@2x.png" mode=""></image>
            我的购物车
          </view>
        </view>
        <!-- tags -->
        <view style="margin-top: 20rpx;">
          <u-tabs :list="list" inactive-color="#aaaaaa" :show-bar="false" active-color="#001B0A" :is-scroll="true" :current="current" @change="dianji"></u-tabs>
        </view>
      </view>
      <!-- 下方的主题内容 -->
      <view style="" v-if="current == 0">
        <view class="zhuti" v-for="(item, index) in list" v-if="index !== 0" :key="index" @click="tiaozhuan(index)">
          <!-- <u-swiper bg-color="#ffffff" height="954" :autoplay="false" :list="list1"></u-swiper> -->
          <image style="width: 686rpx;height: 954rpx;margin-left: 50%;transform: translateX(-50%);" :src="item.image" mode=""></image>
          <view class="bottom">{{ item.name }}</view>
        </view>
      </view>
      <!-- 其他页面 -->
      <view class="faquan" v-else>
        <view class="son" v-for="(item, index) in shoppList" :key="index" @click="detailed(item.id)">
          <image class="img" :src="item.image" mode="widthFix"></image>
          <view class="tit">{{ item.title }}</view>
          <view class="price">￥{{ item.price }}</view>
        </view>
      </view>
      <view v-if="current !== 0 && shoppList == 0" style="margin-top: 50%;margin-left: 50%;transform: translate(-20%,-50%);font-size: 32rpx;color: #aaa;">暂无商品</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 轮播图数据
      list1: [
        {
          image: '/static/lzl/Frame 43@2x.png',
          title: '身无彩凤双飞翼，心有灵犀一点通'
        },
        {
          image: '/static/lzl/Frame 40@2x.png',
          title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
        }
      ],
      page: 1,
      list: [],
      shoppList: [], //商品数据
      current: 0
    };
  },
  watch: {
    // 监听current的改变
    current(newValue, oldValue) {
      if (newValue == 0) return;
      this.page = 1;
      this.shoppList = [];
      this.shoppListInit(this.list[newValue].path_id);
    }
  },
  onShow() {
    this.init();
  },
  //滑到底部
  onReachBottom() {
    this.page++;
    this.shoppListInit(this.list[this.current].path_id);
  },
  methods: {
    // /点击去购物车
    gouShopping() {
      uni.navigateTo({
        url: '/pages/Shopping/shoppingCart/shoppingCart'
      });
    },
    // 点击上方切换tabs
    dianji(item) {
      console.log(item);
      this.current = item;
      // this.shoppListInit(this.list[item].path_id);
    },
    // 点击主题内容跳转
    tiaozhuan(ind) {
      this.current = ind;
    },
    // 点击进入商品详情
    detailed(id) {
      uni.navigateTo({
        url: '/pages/detailed/detailed?id=' + id
      });
    },
    // /获取模板信息
    async init() {
      let n = await this.$api.template();
      // 菜单组
      this.list = n.data.home[1].content.list;
    },
    // 获取列表
    async shoppListInit(category_id = 0, keywords = '') {
      let n = await this.$api.lists({
        category_id,
        keywords,
        page: this.page
      });
      this.shoppList = [...this.shoppList, ...n.data.data];
    }
  }
};
</script>

<style lang="scss" scoped>
.faquan {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  .son {
    width: 345rpx;
    height: 450rpx;
    // background-color: pink;
    box-sizing: border-box;
    margin-bottom: 20rpx;
    .img {
      width: 345rpx;
      height: 314rpx;
    }
    .tit {
      margin-top: 10rpx;
      color: #001b0a;
      font-size: 32rpx;
      display: -webkit-box; //对象作为弹性伸缩盒子模型显示
      overflow: hidden; //溢出隐藏
      -webkit-box-orient: vertical; //设置伸缩盒子对象的子元素的排列方式
      -webkit-line-clamp: 1; //设置 块元素包含的文本行数
    }

    .price {
      font-size: 32rpx;
      color: #001b0a;
      font-weight: 700;
      margin-top: 10rpx;
    }
  }
}
.zhuti {
  position: relative;
  margin-bottom: 100rpx;
  box-sizing: border-box;
  background-color: #fff;
  .bottom {
    position: absolute;
    font-size: 34rpx;
    font-weight: 700;
    box-sizing: border-box;
    bottom: -60rpx;
    left: 20rpx;
    z-index: 9;
  }
}
.top {
  display: flex;
  justify-content: space-between;
  .left {
    width: 226rpx;
    height: 48rpx;
  }
  .right {
    color: #384d40;
    font-size: 28rpx;
  }
}
</style>
